<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>E-mints demo page</title>
	<title>Includes a flyport embedded Simulator, with few controls</title>

	<link href="css/style.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
	<script type="text/javascript" src="js/mchp.js"></script>
  	<script type="text/javascript" src="main.js"></script>
</head>

<body>
<button type="button" onclick="newAJAXCommand('buttons.cgi?btn=1');">Reset Simulator</button>

<form>
        <input name="enteredText" type="text" maxlength="20" >
        <input type="submit" value="Reset TempSimu to">
</form>
<div id="debugjml">

</div>
<div id="content">
	<div id="tstatus">
		<img id="top_board" src="images/top_board.png" alt="top_board" />
		<div id="tstatus_middle">
			<img id="left_board" src="images/left_board.png" alt="left_board" />
			<img id="tdigits" src="images/transparent_digit.png" alt="tdigits" />
			<img id="tdigit1" src="images/transparent_digit.png" alt="digit1" />
			<img id="tdigit2" src="images/transparent_digit.png" alt="digit2" />
			<img id="tdigit3" src="images/transparent_digit.png" alt="digit3" />
			<img id="tdigit4" src="images/transparent_digit.png" alt="digit4" />
			<img id="tdigit5" src="images/transparent_digit.png" alt="digit5" />
			<img id="right_board_kwh" src="images/right_board_kwh.png" alt="right_board_kwh" />
		</div>
		<img id="bottom_board" src="images/bottom_board.png" alt="bottom_board" />
	</div>
	<div id="rhstatus">
		<img id="top_board" src="images/top_board.png" alt="top_board" />
		<div id="rhstatus_middle">
			<img id="left_board" src="images/left_board.png" alt="left_board" />
			<img id="rhdigits" src="images/transparent_digit.png" alt="digits" />
			<img id="rhdigit1" src="images/transparent_digit.png" alt="digit1" />
			<img id="rhdigit2" src="images/transparent_digit.png" alt="digit2" />
			<img id="rhdigit3" src="images/transparent_digit.png" alt="digit3" />
			<img id="right_board_watts" src="images/right_board_watts.png" alt="right_board_watts" /> <img id="bottom_board" src="images/bottom_board.png" alt="bottom_board" />
	</div>
	</div>

</div>

<script type="text/javascript">
function setDisplay(s,t) {
	tsign=1;
	if (t<0){tsign=-1;t=-t}
	t = parseInt(t*10);
	d1 = parseInt(t/100);
	d2 = parseInt(t/10) - d1*10;
	d3 = t - d1*100 - d2*10;
	if (d1>0) i = -100 * d1;
	else i = -2000;
	document.getElementById(s+'1').style.backgroundPosition= i + 'px 0';
	i = -1000 + (-100 * d2);
	document.getElementById(s+'2').style.backgroundPosition= i + 'px 0';
	i = -100 * d3;
	document.getElementById(s+'3').style.backgroundPosition= i + 'px 0';

	if (tsign<0)
	{
		document.getElementById(s+'s').style.backgroundPosition= '-2100px 0';
	}
	else
	{
		document.getElementById(s+'s').style.backgroundPosition= '-2000px 0';
	}
}

function setDisplayTest(s,t) {
	tsign=1;
	t='234,5';
	if (t<0){tsign=-1;t=-t}
	t = parseInt(t*10);
	d1 = parseInt(t/1000);
	d2 = parseInt(t/100) - d1*100;
	d3 = parseInt(t/10) - d1*1000 - d2*100;
	d4 = t - d1*1000 - d2*100 - d3*10;
	if (d1>0) i = -100 * d1;
	else i = -2000;
	document.getElementById(s+'1').style.backgroundPosition= i + 'px 0';
	i = -1000 + (-100 * d2);
	document.getElementById(s+'2').style.backgroundPosition= i + 'px 0';
	i = -100 * d3;
	document.getElementById(s+'3').style.backgroundPosition= i + 'px 0';

	if (tsign<0)
	{
		document.getElementById(s+'s').style.backgroundPosition= '-2100px 0';
	}
	else
	{
		document.getElementById(s+'s').style.backgroundPosition= '-2000px 0';
	}
}

function blankDisplay(s) {
	document.getElementById(s+'s').style.backgroundPosition= '-2000px 0';
	document.getElementById(s+'1').style.backgroundPosition= '-2000px 0';
	document.getElementById(s+'2').style.backgroundPosition= '-2000px 0';
	document.getElementById(s+'3').style.backgroundPosition= '-2000px 0';
}

// Parses the xmlResponse from status.xml and updates the status box
function updateStatus(xmlData) {

	if(!xmlData)
	{
		blankDisplay('tdigit');
		blankDisplay('rhdigit');
		return;
	}
	setDisplayTest('tdigit',getXMLValue(xmlData, 't'));
	setDisplay('rhdigit',getXMLValue(xmlData, 'rh'));
}
newAJAXCommand('status.xml', updateStatus, true, 500);
</script>

<hr />
<p>Demo with jQuery, and some Ajax behind to check the above JScript...</p>
<table>
  <tr>
    <td>t value: <span id="mydynvar1" /></td>
  </tr>
  <tr>
    <td>rh value: <span id="mydynvar2" /></td>
  </tr>
  <tr>
    <td>ts value: <span id="mydynvar3" /></td>
  </tr>
</table>

</body>
</html>